<template>
  <div class="wrapper">
    <ul v-if="infoData">
      <li v-for="(data, index) in getData(infoData.content)" :key="index">
        <img :src="data" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("InforModule", ["infoData"]),
  },
  methods: {
    ...mapActions("InforModule", ["getInfoData"]),
    getData(str) {
      let imgReg =/<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
      let srcReg =/src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
      let arr = str.match(imgReg); //筛选出所有的img
      // 存放所有图片的src
      let srcArr = [];
      for (let i = 0; i < arr.length; i++) {
        let src = arr[i].match(srcReg);
        // 获取图片地址
        srcArr.push(src[1]);
      }
      return srcArr;
    },
  },
  mounted() {
    if (this.infoData === "") {
      this.getInfoData().then(() => {});
    }
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  padding-bottom: 35px;
  img {
    width: 100%;
  }
}
</style>